<template>
  <div>
    <!-- 质量检测记录表单弹窗 -->
    <el-dialog
      :close-on-click-modal="false"
      v-model="visibleDialog"
      :title="props.title"
      width="1000px"
      draggable
      :align-center="true"
      @close="closeDialog"
      destroy-on-close
      style="min-width: 1000px"
      class="maxhDialog"
    >
      <el-descriptions :column="3" size="large" border v-if="props.isReadonly">
        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">测量时间</div>
          </template>
          {{ formData.measuringTime || "" }}
        </el-descriptions-item>
        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">生产设备</div>
          </template>
          {{ formData.productionEquipCode || "" }}
        </el-descriptions-item>
        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">设备编号</div>
          </template>
          {{ formData.machineCode || "" }}
        </el-descriptions-item>
        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">测量设备编号</div>
          </template>
          {{ formData.measuringMachineCode || "" }}
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template #label>
            <div class="cell-item">测量设备名称</div>
          </template>
          {{ formData.measuringMachineName || "" }}
        </el-descriptions-item>
        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">审核人</div>
          </template>
          {{ formData.examiner || "" }}
        </el-descriptions-item>

        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">测量代码</div>
          </template>
          {{ formData.manufacturingCode || "" }}
        </el-descriptions-item>

        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">测量结果</div>
          </template>
          <el-tag v-show="formData.result == '1'">合格</el-tag>
          <el-tag v-show="formData.result == '0'" type="danger">不合格</el-tag>
        </el-descriptions-item>

        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">物料编号</div>
          </template>
          {{ formData.materialCode || "" }}
        </el-descriptions-item>

        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">序列号</div>
          </template>
          {{ formData.serialNumber || "" }}
        </el-descriptions-item>

        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">采集时间</div>
          </template>
          {{ formData.createTime || "" }}
        </el-descriptions-item>
      </el-descriptions>
      <h3 class="mb-[10px] mt-[20px] c-[#333] text-[15px] font-600 lh-[28px]">
        详细信息
      </h3>
      <el-table
        ref="dataTableRef"
        :data="formData.details"
        highlight-current-row
        border
        :cell-style="{ 'text-align': 'center' }"
        :max-height="`calc(70vh - 300px)`"
      >
        <el-table-column label="序号" type="index" width="150" />
        <el-table-column
          label="特性描述"
          prop="paramName"
          show-overflow-tooltip
        />
        <el-table-column
          label="特性值"
          prop="paramValue"
          show-overflow-tooltip
        />
        <el-table-column label="名义值" prop="nominal" show-overflow-tooltip />
        <el-table-column
          label="下限值"
          prop="lowerLimitValue"
          show-overflow-tooltip
        />
        <el-table-column
          label="上限值"
          prop="upperLimitValue"
          show-overflow-tooltip
        />
      </el-table>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { useDictStoreHook } from "@/store/modules/dictionary"; // 引入
const dictionaryStore = useDictStoreHook();

defineOptions({
  name: "ETLQDDETECTIONDATAADDORUPDATE",
  inheritAttrs: false,
});

const emit = defineEmits(["reset-table", "change-visible"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});

const visibleDialog = ref(false);
watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
  }
);

let formData: any = ref();

watch(
  () => props.data,
  (newVal: any) => {
    // formData.value.id = "";
    if (newVal?.id) {
      console.log("newVal", newVal);
      formData.value = newVal;
    }
  }
);

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
  // resetForm();
}

/** 重置表单 */
function resetForm() {
  formData.value = {};
}

const loading = ref(false);

// 组件销毁时调用
onBeforeUnmount(() => {
  visibleDialog.value = false;
  emit("change-visible", false);
});
</script>
<style lang="scss" scoped>
:deep(.maxhDialog .el-dialog__body) {
  max-height: 70vh;
  overflow-y: auto;
  padding: 20px;
}
:deep(.el-descriptions__label.el-descriptions__cell.is-bordered-label) {
  width: 120px;
}
:deep(.el-descriptions__content.el-descriptions__cell.is-bordered-content) {
  min-width: 180px;
}
</style>
